﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head>
    <meta charset="utf-8">
    <title>五指山农污处理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/public.css" media="all">
    <%-- <link rel="shortcut icon" href="<%=request.getContextPath()%>/huazhi/images/favicon.ico"/>--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/huazhi/css/tubiao/iconfont.css">

</head>
<style>
    .layui-card-header .layui-a-tips{position: absolute; right: 15px; color: #01AAED;}

    .header {
        height: 80px;
        line-height: 80px;
    }

    .border-box {
        position: relative;
        width: 100%;
        height: 380px;
        background-color: transparent;
        border: 1px solid #829bea;
        border-radius: 2px;
    }

    .border-box::before {
        position: absolute;
        top: -1px;
        bottom: -1px;
        left: 10px;
        width: calc(100% - 20px);
        content: "";
        border-top: 1px solid #829bea;
        border-bottom: 1px solid #829bea;
        z-index: 0;
    }

    /* 数据概览 */
    .layadmin-dataview {

        height: 300px !important;
    }

    .layadmin-dataview > *[carousel-item]:before {
        display: none;
    }

    .layadmin-dataview > *[carousel-item] > div {
        height: 332px;
    }

    .layui-card-body {
        padding: 20px 15px;
    }

    .layui-carousel {
        background-color: transparent;
    }

    .layui-table thead tr {
        background-color: transparent;
    }

    .layui-table {
        background-color: transparent;
        color: #e5dcdc;
    }

    img {
        border: 0;
    }

    /* 本例子css */
    .txtMarquee-top {
        /*width: 450px;*/
        overflow: hidden;
        position: relative;
        /*border: 1px solid #ccc;*/
    }

    .txtMarquee-top .hd {
        overflow: hidden;
        height: 30px;
        background: #f4f4f4;
        padding: 0 10px;
    }

    .txtMarquee-top .hd .prev, .txtMarquee-top .hd .next {
        display: block;
        width: 9px;
        height: 5px;
        float: right;
        margin-right: 5px;
        margin-top: 10px;
        overflow: hidden;
        cursor: pointer;
        background: url("<%=request.getContextPath()%>/huazhi/images/arrow.png") no-repeat;
    }

    .txtMarquee-top .hd .next {
        background-position: 0 -140px;
    }

    .txtMarquee-top .hd .prevStop {
        background-position: -60px -100px;
    }

    .txtMarquee-top .hd .nextStop {
        background-position: -60px -140px;
    }

    /*.txtMarquee-top .bd {*/
    /*    padding: 15px;*/
    /*}*/

    .txtMarquee-top .infoList li {
        height: 24px;
        line-height: 24px;
    }

    .txtMarquee-top .infoList li .date {
        float: right;
        color: #999;
    }

    .amap-marker-label {

        z-index: 2;
        border: 1px solid #ccc;
        background-color: #000001;
        white-space: nowrap;
        cursor: default;
        padding: 3px;
        font-size: 10px;
        line-height: 12px;

    }

    .tempWrap {
        height: 260px;
    }


</style>
<body style="background: url(<%=request.getContextPath()%>/huazhi/images/bg110420cf.png) no-repeat;
        background-size: 100% 100%;background-attachment:fixed;margin:0px;">
<div class="layui-fluid">
    <div class="layui-card" style="background-color:transparent">
        <div class="layui-card-body">
            <div class="layui-col-md12 header" style="text-align:center">
                <span style="color: #fff;font-size:30px;text-align: center;display:block;right: 50%">农污处理系统远程监测及运维平台控制驾驶舱</span>
            </div>
            <hr style="background-color: #645e5e;"/>
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-card border-box">
                        <div class="layui-card-header" style="color:#fff; background: -webkit-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -o-linear-gradient(left,#4282c8, #234b75,transparent, transparent);
   background: -moz-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -ms-linear-gradient(left,#4282c8, #234b75, transparent, transparent);border-bottom: none"><span>污水站在线状态</span><span style="float: right" id="wszsum"></span>
                        </div>
                        <div class="layui-card-body">
                            <div id="one" class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-normcol">
                            </div>
                        </div>
                    </div>
                    <div class="layui-card border-box">
                        <div class="layui-card-header" style="color:#fff; background: -webkit-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -o-linear-gradient(left,#4282c8, #234b75,transparent, transparent);
   background: -moz-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -ms-linear-gradient(left,#4282c8, #234b75, transparent, transparent);border-bottom: none">污水站状态浏览</div>
                        <div class="layui-card-body">
                            <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                 lay-filter="LAY-index-normcol">
                                <table class="layui-table" lay-skin="line">
                                    <colgroup>
                                        <col width="150">
                                        <col width="200">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th style="width: 35%;">村名</th>
                                        <th style="width: 30%; padding-left:75px">状态</th>
                                        <th style="width: 35%;">发生时间</th>
                                        <th style="width: 2%;"></th>
                                    </tr>
                                    </thead>
                                </table>
                                <div class="txtMarquee-top">
                                    <div class="bd">
                                        <ul class="infoList" id="bigUl"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md8">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            <div class="layui-card border-box" style="height: 778px;" id="mapdiv">
                                <div class="layui-card-header" style="color:#fff; background: -webkit-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -o-linear-gradient(left,#4282c8, #234b75,transparent, transparent);
   background: -moz-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -ms-linear-gradient(left,#4282c8, #234b75, transparent, transparent);border-bottom: none"><span>设备地图</span><span id="sbsum"></span><a
                                        href="javascript:;" onclick="opens()" class="layui-a-tips"> <i
                                        class="tubiao icon-fangda"></i> </a>
                                </div>
                                <div class="layui-card-body" id="shebeiditu" style="height: 696px;"></div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card border-box">
                                <div class="layui-card-header" style="color:#fff; background: -webkit-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -o-linear-gradient(left,#4282c8, #234b75,transparent, transparent);
   background: -moz-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -ms-linear-gradient(left,#4282c8, #234b75, transparent, transparent);border-bottom: none"><span id="jkqj">监控球机运行情况</span>
                                </div>
                                <div class="layui-card-body">
                                    <div id="four" class="layui-carousel layadmin-carousel layadmin-dataview"
                                         data-anim="fade"
                                         lay-filter="LAY-index-normcol">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-card border-box">
                                <div class="layui-card-header" style="color:#fff; background: -webkit-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -o-linear-gradient(left,#4282c8, #234b75,transparent, transparent);
   background: -moz-linear-gradient(left,#4282c8, #234b75, transparent, transparent);
   background: -ms-linear-gradient(left,#4282c8, #234b75, transparent, transparent);border-bottom: none">污水站运行状态
                                </div>
                                <div class="layui-card-body">
                                    <div id="two" class="layui-carousel layadmin-carousel layadmin-dataview"
                                         data-anim="fade" lay-filter="LAY-index-normcol">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<%=request.getContextPath()%>/huazhi/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/lib/layui-v2.5.5/layui.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/js/jquery.SuperSlide.2.1.3.js"></script>
<script src="<%=request.getContextPath()%>/huazhi/js/lay-module/echarts/echarts.js"></script>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.12&key=b51f3248d9ad4e26ad1841c5a558f596"></script>
<script>

    layui.use(['table', 'layer'], function () {
        var $ = layui.$
            , layer = layui.layer
            , table = layui.table;
        var onevalue1 = 0, onevalue2 = 0, onevalue3 = 0 ,onevalue4 = 0;
        var vSum = 0
        var noVSum = 0
        var onlyViedoSum = 0;
        var videoAndDtuSum = 0;
        var ul = '';
        $.ajax({
            type: "get",
            url: "<%=request.getContextPath()%>/rest/base/getDisplayLined",
            dataType: "json",
            success: function (data) {
                var showData = data.data;
                var state = null;
                var zdsum = 0;
                var sgSum = 0;
                var videoSum = 0;
                if(showData != null){
                    for(var i in showData){
                        var oneData = showData[i];
                        if(oneData != null){
                            zdsum++;
                            if(oneData.number!= null && oneData.number != ''){
                               sgSum++;
                            }

                            if(oneData.videoUrl != null && oneData.videoUrl!= ''){
                             if(oneData.number!= null && oneData.number != ''){
                                 videoAndDtuSum++
                             }else {
                                onlyViedoSum++
                             }
                            }else {
                                noVSum++
                            }

                            var time = oneData.createtimestring == null ? "":oneData.createtimestring;
                            ul += '<li><div class="layui-col-md6" >';
                            ul += '<span style="color: #fff;line-height: 20px;font-size: 13px;min-height: 20px;">' + oneData.cun + '</span></div>';
                            if(oneData.state === "1"){
                                state = "故障";
                                onevalue2++;
                                ul += '<div class="layui-col-md1" >';
                                ul += '<span style="color: #fff;line-height: 20px;font-size: 13px;min-height: 20px;color: red;">' + state + '</span></div>';
                            }else if(oneData.state === "2"){
                                state = "离线";
                                onevalue3++;
                                ul += '<div class="layui-col-md1" >';
                                ul += '<span style="color: #fff;line-height: 20px;font-size: 13px;min-height: 20px;color: red;">' + state + '</span></div>';
                            }else if(oneData.state === "3"){
                                state = "内部异常";
                                  onevalue3++
                                ul += '<div class="layui-col-md1" >';
                                ul += '<span style="color: #fff;line-height: 20px;font-size: 13px;min-height: 20px;color: royalblue;">' + state + '</span></div>';
                            }else {
                                state = "正常";
                                onevalue1++;
                                ul += '<div class="layui-col-md1" >';
                                ul += '<span style="color: #fff;line-height: 20px;font-size: 13px;min-height: 20px;">' + state + '</span></div>';
                            }
                            ul += '<div class="layui-col-md4" >';
                            ul += '<span style="color: #fff;line-height: 20px;font-size: 13px;min-height: 20px;">' + time + '</span></div></li>';

                        }
                    }
                    noVSum = zdsum - videoAndDtuSum - onlyViedoSum
                    vSum = onlyViedoSum + videoAndDtuSum
                    getChartFor(vSum,noVSum,onlyViedoSum,videoAndDtuSum)
                    $('#bigUl').html(ul)
                    jQuery(".txtMarquee-top").slide({
                        mainCell: ".bd ul",
                        autoPlay: true,
                        effect: "topMarquee",
                        interTime: 20000,
                    });
                }
                document.getElementById("wszsum").innerText = "污水站总数：" + zdsum
                document.getElementById("jkqj").innerText = "监控球机运行情况："+vSum+"个"
                var sb = document.getElementById("sbsum");
                sb.innerHTML = "设备总数:" + zdsum+'--'+"水罐总数:"+sgSum;
                sb.style.marginLeft = "25%";

                var chartOne = echarts.init(document.getElementById('one'))
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    series: [{
                        name: '检测设备在线情况',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                pisition: 'inside',
                                show: true,
                                formatter: '{b}{c} ({d}%)',
                                rich: {
                                    name: {
                                        textBorderColor: '#fff'
                                    }
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [
                            {value: onevalue1, name: '在线'},
                            {value: onevalue3, name: '离线'},
                            {value: onevalue2, name: '故障'}

                        ],
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                                color: function (params) {
                                    var colorList = [
                                        '#4F81BD', '#C0504D', '#876DA7', '#4BACC6', '#88bef5', '#ba53de'
                                    ];
                                    return colorList[params.dataIndex]
                                },

                            },
                        },
                    }
                    ]
                };
                chartOne.setOption(option);
                chartOne.hideLoading();
            }
        });
        // }
        $.ajax({
            type: "get",
            url: "<%=request.getContextPath()%>/rest/base/getLineSumBi",
            dataType: "json",
            success: function (data) {
                var chartTwo = echarts.init(document.getElementById('two'))
                var optionTwo = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['开启总时长', '关闭总时长'],
                        textStyle:{
                            color:"#fff"
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['产水泵', '反洗泵', '鼓风机', '搅拌机', '回流泵'],
                            axisLine: {
                                lineStyle: {
                                    color: "#fff",
                                },
                            },
                            axisLabel: {
                                interval:0,
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '时长（分钟）',
                            axisLine: {
                                lineStyle: {
                                    color: "#fff",
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '开启总时长',
                            type: 'bar',
                            data: data[0],
                            label: {
                                show: true,
                                position: 'top'
                            },
                            itemStyle: {
                                normal: {
                                    // 随机显示
                                    //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                                    color: function (params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#ef9b59'
                                        ];
                                        return colorList[params.dataIndex]
                                    },

                                },
                            },
                        },
                        {
                            name: '关闭总时长',
                            type: 'bar',
                            stack: '广告',
                            data: data[1],
                            label: {
                                show: true,
                                position: 'top'
                            },
                            itemStyle: {
                                normal: {
                                    // 随机显示
                                    //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                                    color: function (params) {
                                        // build a color map as your need.
                                        var colorList = [
                                            '#ba53de'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                },
                            },
                        }
                    ]
                };
                chartTwo.setOption(optionTwo);
                chartTwo.hideLoading();
            }
        });

        var map = new AMap.Map('shebeiditu', {
            resizeEnable: true,
            center: [109.509597, 18.773616],//设置地图中心点坐标
            zoom: 11, //设置地图显示的缩放级别
            viewMode: '2D',  //设置地图模式
            lang: 'zh_cn',  //设置地图语言类型
            mapStyle: "amap://styles/darkblue"
        });
        window.setTimeout(function () {
            addCloudLayer(map)
        }, 100);
        var markers = []
        function addCloudLayer(map) {
            $.ajax({
                type: "post",
                url: "<%=request.getContextPath()%>/rest/smoke/getLinedAll",
                dataType: "json",
                async: false,
                success: function (res) {
                    if (res.data != null) {
                        var Lineds = res.data
                        for (var i = 0; i < Lineds.length; i++) {
                            var oneLined = Lineds[i]

                            var redOrGreen = ''
                            if (oneLined.state == 1) {
                                redOrGreen = 'Red3.gif'
                            } else  if(oneLined.state == 2){
                                redOrGreen = 'Dklj1.jpg'
                            }else  if(oneLined.state == 3){
                                redOrGreen = 'Nbyc1.jpg'
                            }else  if(oneLined.state == 4){
                                redOrGreen = 'Sxt1.png'
                            }
                            else {
                                redOrGreen = 'Zc1.png'
                            }
                            var oneMaker = new AMap.Marker({
                                icon: "<%=request.getContextPath()%>/huazhi/images/point" + redOrGreen,
                                map: map,
                                position: [oneLined.jingdu, oneLined.weidu],
                                clickable: true,
                            });
                            // 设置label标签
                            // label默认蓝框白底左上角显示，样式className为：amap-marker-label
                            oneMaker.setLabel({
                                offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                                content: "<div class='info' style='color: #00a7d2'>" + oneLined.cun + "</div>", //设置文本标注内容
                                direction: 'bottom' //设置文本标注方位
                            });
                            Lineds[i].para = oneMaker
                            markers.push(oneMaker);
                            Lineds[i].para.setMap(map);
                            Lineds[i].para.setExtData({
                                url: Lineds[i].videoUrl,
                                sericl: Lineds[i].videotid,
                                sequence: i,
                                cun:Lineds[i].cun,
                                cunTid:Lineds[i].tid,
                            });
                            var _onClick = function (e) {
                                var ext = e.target.getExtData()
                                details(ext.cun, ext.sericl, ext.url, ext.cunTid);
                            }
                            AMap.event.addListener(oneMaker, 'click', _onClick);
                        }

                    }
                }
            });

            // var optionFour = {
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{a} <br/>{b} : {c} ({d}%)'
            //     },
            //     series: [
            //         {
            //             name: '视频监控运行状况',
            //             type: 'pie',
            //             radius: '70%',
            //             center: ['50%', '60%'],
            //             data: [
            //                 {value:  vSum , name: '有监控'},
            //                 {value: noVSum, name: '无监控'},
            //                 // {value: 1, name: '监控故障'},
            //             ],
            //             label: {
            //                 normal: {
            //                     pisition: 'inside',
            //                     show: true,
            //                     fontSize: 12,
            //                     formatter: '{b}\n{c} ({d}%)',
            //                     rich: {
            //                         name: {
            //                             textBorderColor: '#fff'
            //                         }
            //                     }
            //                 },
            //                 emphasis: {
            //                     show: true,
            //                     textStyle: {
            //                         fontSize: '30',
            //                         fontWeight: 'bold'
            //                     }
            //                 }
            //             },
            //             emphasis: {
            //                 itemStyle: {
            //                     shadowBlur: 10,
            //                     shadowOffsetX: 0,
            //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //                 }
            //             },
            //             itemStyle: {
            //                 normal: {
            //                     // 随机显示
            //                     //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
            //                     color: function (params) {
            //                         // build a color map as your need.
            //                         var colorList = [
            //                             '#4F81BD', '#769353', '#64bd97', '#ff4b68', '#C0504D',];
            //                         return colorList[params.dataIndex]
            //                     },
            //
            //                 },
            //             },
            //         }
            //     ]
            // };


            jQuery(".txtMarquee-top").slide({
                mainCell: ".bd ul",
                autoPlay: true,
                effect: "topMarquee",
                vis: 2,
                interTime: 50
            });
        }
        function details(cun, videoTid, videoUrl,cunTid) {
            layer.open({
                title: "污水实时监控-" + cun,
                type: 2,
                area: ['90%', '90%'],
                content: '<%=request.getContextPath()%>/rest/getRoute?type=home&url=sewage_info',
                shade: 0.8,
                anim: 4,
                skin: 'layui-layer-molv',
                resize: false,
                move: false,
                success: function (layero, index) {  //当你需要在层创建完毕时即执行一些语句，可以通过该回调 想相当于吧值转到子界面
                    var iframe = window['layui-layer-iframe' + index];
                    iframe.child(videoTid, videoUrl,cun,cunTid);
                }
            });

        }
    });

    function opens(){
        layer.open({
            title: "污水处理点分布地图 ",
            type: 2,
            area: ['90%', '90%'],
            content: '<%=request.getContextPath()%>/rest/getRoute?type=home&url=map',
            shade: 0.6,
            anim: 4,
            // skin: 'layui-layer-molv',
            resize: true,
            move: false,
            maxmin: true,
            success: function (layero, index) {  //当你需要在层创建完毕时即执行一些语句，可以通过该回调 想相当于吧值转到子界面

            }
        });
    }
    function  getChartFor(vSum,noVSum,onlyViedoSum,videoAndDtuSum){
        console.log(vSum)
        console.log(onlyViedoSum)
        console.log(videoAndDtuSum)
        console.log(noVSum)
        var chartFour = echarts.init(document.getElementById('four'))
        var optionFour = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                textStyle: {
                    color: '#fff'
                },
                data: ['没有摄像头', '有摄像头且有采集器', '只有摄像头', '有摄像头总数', '无摄像头总数']
            },
            series: [
                {
                    name: '统计数量',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],
                    label: {
                        position: 'inner',
                        fontSize: 8,
                        fontcolor:'#fff'
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value:  vSum, name: '有摄像头总数'},
                        {value:  noVSum , name: '无摄像头总数'},
                    ]
                },
                {
                    name: '统计数量',
                    type: 'pie',
                    radius: ['45%', '60%'],
                    labelLine: {
                        length: 30,
                    },
                    // label: {
                    //     formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    //     backgroundColor: '#F6F8FC',
                    //     borderColor: '#8C8D8E',
                    //     borderWidth: 1,
                    //     borderRadius: 4,
                    //
                    //     rich: {
                    //         a: {
                    //             color: '#6E7079',
                    //             lineHeight: 22,
                    //             align: 'center'
                    //         },
                    //         hr: {
                    //             borderColor: '#8C8D8E',
                    //             width: '100%',
                    //             borderWidth: 1,
                    //             height: 0
                    //         },
                    //         b: {
                    //             color: '#4C5058',
                    //             fontSize: 14,
                    //             fontWeight: 'bold',
                    //             lineHeight: 33
                    //         },
                    //         per: {
                    //             color: '#fff',
                    //             backgroundColor: '#4C5058',
                    //             padding: [3, 4],
                    //             borderRadius: 4
                    //         }
                    //     }
                    // },
                    data: [
                        {value: noVSum, name: '没有摄像头'},
                        {value: videoAndDtuSum, name: '有摄像头且有采集器'},
                        {value: onlyViedoSum, name: '只有摄像头'}
                    ]
                }
            ]
        };
        optionFour.series[0].data[0].value = vSum
        optionFour.series[0].data[1].value = noVSum
        optionFour.series[1].data[0].value = noVSum
        optionFour.series[1].data[1].value = videoAndDtuSum
        optionFour.series[1].data[2].value = onlyViedoSum
        chartFour.setOption(optionFour);
        chartFour.hideLoading();
    }
</script>
</body>
</html>
